【CSS】:checked（擬似クラス） - チェック状態

CSSの擬似クラス/checkedについて解説します。

検証環境

CSS

macOS

14.1

checked

擬似クラス/checkedは“チェックボックスやラジオボタンがONの状態を表す擬似クラス”です。

:checked {
    プロパティ名: プロパティ値;
}

チェックボックスをON（チェック）にすると、次兄弟のlabel要素のテキストカラーを赤色に変更するサンプルです。

sample.html

<style>
___ih_hl_start
input:checked + label {
___ih_hl_end
    color: red;
}

</style>
<input type="checkbox"><label>同意する</label>

プレビュー